<script setup lang='ts'>
import { EPageDataMarketType } from '~/stores/sports'

interface IComponentsList {
  [t: string]: Component
}

defineOptions({ name: 'AppSportsPageSport' })

const route = useRoute()
const sportsStore = useSportsStore()

const typeList = [
  { label: $t('spt_type_event'), value: EPageDataMarketType.EVENT, icon: 'sports-rec' },
  { label: $t('spt_type_outright'), value: EPageDataMarketType.OUTRIGHT, icon: 'spt-outright' },
]

// 页面赛事类型
const sportPageCurrentMarketType = ref(route.query.marketType?.toString() ?? EPageDataMarketType.EVENT)

// 当前页面球种id
const si = computed(() => route.query.si?.toString() ?? '0')
// 当前的联赛id
const ci = computed(() => route.query.ci?.toString())
// 球种icon
const icon = computed(() => sportsStore.getSportsIconBySi(+si.value))
// 球种名称
const name = computed(() => sportsStore.getSportsNameBySi(+si.value))
// 当前显示赛事
const isEventType = computed(() => sportPageCurrentMarketType.value === EPageDataMarketType.EVENT)
// 当前显示冠军
const isOutrightType = computed(() => sportPageCurrentMarketType.value === EPageDataMarketType.OUTRIGHT)
// 当前显示联赛数据
const isLeagueType = computed(() => !!ci.value)

// 数据模块
const componentList: IComponentsList = {
  'AppSportsPageSportEventList': defineAsyncComponent(() => import('~/components/AppSportsPageSportEventList.vue')),
  'AppSportsPageSportLeagueEventList': defineAsyncComponent(() => import('~/components/AppSportsPageSportLeagueEventList.vue')),
  'AppSportsPageSportOutrightList': defineAsyncComponent(() => import('~/components/AppSportsPageSportOutrightList.vue')),
  'EmptyComponent': defineComponent({
    name: 'EmptyComponent',
    render() {
      return h('div')
    }
  })
}
const currentComponentKey = computed(() => {
  if (isEventType.value && !isLeagueType.value)
    return 'AppSportsPageSportEventList'
  if (isEventType.value && isLeagueType.value)
    return 'AppSportsPageSportLeagueEventList'
  if (isOutrightType.value)
    return 'AppSportsPageSportOutrightList'
  return 'EmptyComponent'
})
const _component = computed(() => componentList[currentComponentKey.value])

// 更换赛事或冠军
function changeType(v: EPageDataMarketType) {
  sportPageCurrentMarketType.value = v
}

function suspenseResolved() { }

watch([si, ci], () => {
  changeType(EPageDataMarketType.EVENT)
})

provide('isOutrightType', isOutrightType)
</script>

<template>
  <div>
    <div class="text-[24px] font-semibold mb-[16px] text-[var(--color-text-white-0)] flex items-center leading-[32px]">
      <div class="w-[32px] h-[32px] flex items-center justify-center mr-[8px] p-[4px]">
        <BaseImage :url="icon" is-network />
      </div>
      {{ name }}
    </div>
    <!-- 联赛筛选 -->
    <AppSportsAllLeagueTabs :si="+si" :ci="ci" />

    <!-- 类型切换 -->
    <div class="mt-[16px]">
      <div class="flex w-full h-[40px]">
        <div v-for="type in typeList" :ley="type.value" @click="changeType(type.value)" class="type-item"
          :class="{ active: sportPageCurrentMarketType === type.value }">
          <div class="icon">
            <BaseIcon :name="type.icon" />
          </div>
          <span class="ml-[4px]" v-show="sportPageCurrentMarketType === type.value">
            {{ type.label }}
          </span>
        </div>
      </div>
    </div>

    <keep-alive :max="10">
      <Suspense timeout="0" @resolve="suspenseResolved">
        <component v-if="_component" :is="_component" :si="+si" :ci="ci ?? ''" :key="`${si}${currentComponentKey}`" />
        <template #fallback>
          <div class="w-full h-[500px] flex items-center justify-center z-[101] absolute bg-[var(--color-bg-black-2)]">
            <BaseLoading class="w-[44px] h-[44px] mb-[8px]" />
          </div>
        </template>
      </Suspense>
    </keep-alive>

  </div>
</template>

<style lang='scss' scoped>
.type-item {
  color: var(--color-text-white-0);
  height: 40px;
  display: flex;
  font-size: 14px;
  min-width: 40px;
  background: var(--color-bg-black-3);
  box-sizing: border-box;
  transition: all 0.3s;
  align-items: center;
  font-weight: 600;
  line-height: 20px;
  margin-right: 8px;
  border-radius: 8px;
  --tg-base-icon-color: var(--color-text-white-0);
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;

  .icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    display: flex;
    opacity: 0.5;
    align-items: center;
    justify-content: center;
  }

  &.active {
    color: var(--color-bg-black-0);
    --tg-base-icon-color: var(--color-bg-black-0);
    background: #24ee89;
    padding-right: 12px;

    .icon {
      opacity: 1;
    }
  }
}
</style>
